<template>
	<view class="repairs">
		<view class="center">
			<text class="type">类型</text>
			<text class="select">请选择问题类型<text class="iconfont icon-a-10-you" style="margin-left:16rpx;"></text></text>
		</view>
		<view class="center">
			<text class="type">地址</text>
			<text class="select">清水湾2号楼1单元2103<text class="iconfont icon-a-10-you"
					style="margin-left:16rpx;"></text></text>
		</view>
		<view class="center" style="border: none;">
			<text class="type">联系电话</text>
			<text class="select">13522568755<text class="iconfont icon-a-10-you"
					style="margin-left:16rpx;"></text></text>
		</view>
		<view class="text">
			<textarea value="" style="margin-left: 26rpx;margin-top: 26rpx;font-size: 27rpx;"
				placeholder="请输入报修问题,以便维修人员尽快为您解决" />
		</view>
		<view class="picture">
			<view class="img">
				<image src="" @click="uploadImg" class="iconfont icon-zhaoxiang" mode="">
				</image>
			</view>
			<image src="" @click="uploadImg" mode="" class="img"></image>
			<image src="" @click="uploadImg" mode="" class="img"></image>
			<image v-for="(item,index) in imgArr" :src="item" class="img">
			</image>
		</view>
		<view class="btn">
			确认报修
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr: []
			}
		},
		onLoad() {

		},
		methods: {
			uploadImg() {
				let that = this
				uni.chooseImage({
					success(res) {
						console.log(res.tempFilePaths)
						that.imgArr = res.tempFilePaths;
						console.log(that.imgArr)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.repairs {
		box-sizing: border-box;
		padding: 0rpx 11rpx;
		// height: 100vh;
		overflow-y: auto;

		.center {
			display: flex;
			justify-content: space-between;
			// width: 730rpx;
			// height: 104rpx;
			margin: 10rpx 0;
			line-height: 104rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.type {
				font-size: 30rpx;
				margin-left: 19rpx;
			}

			.select {
				color: #898989;
				font-size: 25rpx;
				margin-right: 36rpx;
			}

		}

		.text {
			width: 670rpx;
			height: 190rpx;
			margin: 0 0 15rpx 21rpx;
			border-radius: 10rpx;
			border: 1px solid #c5c5c5;
		}

		.picture {
			display: flex;
			flex: 1;

			.img {
				display: flex;
				align-items: center;
				width: 130rpx;
				height: 130rpx;
				margin-left: 30rpx;
				margin-top: 34rpx;
				border: 1rpx solid #c5c5c5;
				border-radius: 10rpx;

				image {
					border: none;
					width: 130rpx;
					height: 130rpx;
				}

				.iconfont {
					padding: 50rpx;
					box-sizing: border-box;
				}
			}
		}

		.btn {
			width: 510rpx;
			height: 80rpx;
			background-color: #1f8fff;
			font-size: 30rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			border-radius: 38rpx;
			margin-top: 89rpx;
			margin-left: 118rpx;

		}
	}
</style>
